<template>
  <div class="app-container">
    <div style="font-size: 19PX; font-weight: 600; margin-bottom: 20px; margin-left: 20px;">
      <div v-text="this.$route.name"></div>
    </div>

    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <!--讲师头像上传 -->
      <el-form-item label="讲师头像">
        <!--展示-->
        <pan-thumb :image="teacher.avatar"/>
        <!--文件上传按钮-->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
        <!--
        v-show：是否显示上传组件
        ：key:类似于id，如果一个页面多个图片上传控件，可以做分区
        ：url：后台上传的url地址
        ：crop-upload-success:上传成功后的回调
        -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="'/oss/uploadFile'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" :plain="true" type="primary" @click="addOrupdateTeacher">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    import http from "@/api/teacher"
    import PanThumb from "../../../components/PanThumb/index";
    import ImageCropper from "../../../components/ImageCropper/index";

    export default {
        name: "save",
        components: {ImageCropper, PanThumb},
        data() {
            return {
                teacher: {
                    name: '',
                    sort: 0,
                    level: 1,
                    career: '',
                    intro: '',
                    avatar: 'https://edu-zjm.oss-cn-beijing.aliyuncs.com/2020/04/18/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.jpg',
                },
                imagecropperShow:false,
                imagecropperKey:0,
                saveBtnDisabled: false  //保存按钮禁用
            }
        },
        created() {
            if (this.$route.params && this.$route.params.id) {
                this.getTercherById(this.$route.params.id)
            }
        },
        methods: {
            //关闭上传弹框
            close(){
              this.imagecropperShow = false;
              this.imagecropperKey += 1
            },
            //上传成功的回调函数
            cropSuccess(data){
                this.teacher.avatar = process.env.BASE_API+data
                this.close()
            },
            getTercherById(id) {
                http.getTeacherById(id).then(res => {
                    if (res.data){
                        this.teacher = res.data
                    }
                })
            },
            addOrupdateTeacher() {
                this.saveBtnDisabled = true
                http.addOrupdateTeacher(this.teacher).then(res => {
                    this.$message({
                        type: 'success',
                        message: this.$route.name + '成功!'
                    });
                    this.$router.push("/teacher/table")
                })
            }
        },
        watch: {
            $route(to, from) {
                this.teacher = {
                    name: '',
                    sort: 0,
                    level: 1,
                    career: '',
                    intro: '',
                    avatar: 'https://edu-zjm.oss-cn-beijing.aliyuncs.com/2020/04/18/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.jpg',
                }
            },
        }
    }
</script>

<style scoped>

</style>
